<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的博客</title>
    <link rel="stylesheet" href="css/conmmon.css">
    <link rel="stylesheet" href="css/blog_list.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/logout.js"></script>
    <script src="js/urltools.js"></script>


    <style>
        .container {
            padding-top: 80px;
            height: auto;
        }

        .container-right {
            width: 85%;
        }

    </style>
</head>

<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="img/logo2.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 用来占据中间位置 -->
        <span class="spacer"></span>
        <a href="blog_list.html">博客主页</a>
        <a href="blog_add.html">写博客</a>
        <a href="javascript:logout()">注销</a>
        <a href="blog_drafts.html" >草稿箱</a>

    </div>
    <!-- 版心 -->
    <div class="container" >
        <!-- 左侧个人信息 -->
        <div class="container-left" style="width: 30%;">
            <div class="card">
                <form id="head-img" enctype="multipart/form-data" >
                    <input type="file"  name="imgfile"  style="display: none!important;"  onchange="uploadPic()" id="imgfile" accept="image/*" value="" />					
                </form>
                <img  class="head-img" id="user-head" src="img/avatar.png"/>
                 
            

                <h3>小可爱</h3>
                <a href="http:www.github.com">github 地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>


        <!-- 右侧内容详情 -->
        <div id="artlist" class="container-right" style="margin-left: 5%;">
            <div id="myArticleList">
                <div class="blog">
                    <div class="title">我的第一篇博客</div>
                    <div class="date">2021-06-02</div>
                    <div class="desc">正文</div>
                    <a href="blog_content.html?id=1" class="detail">查看全文 &gt;&gt;</a>
                    <a href="blog_edit.html?id=1" class="detail">修改 &gt;&gt;</a>
                    <a href="Javascript:del()" class="detail">删除 &gt;&gt;</a>
                </div>

            </div>
            <hr>
            <div id="pageDiv" class="blog-pagnation-wrapper">
                <button onclick="doFirst()" class="blog-pagnation-item">首页</button>
                <button onclick="doUpPage()" class="blog-pagnation-item">上一页</button>
                <button onclick="doDownPage()" class="blog-pagnation-item">下一页</button>
                <button onclick="doLast()" class="blog-pagnation-item">末页</button>
            </div>
        </div>

        
    </div>
    <script>
           var pageSize = 2; // 每页最大条数
        var pageIndex = 1; // 当前分页器位置
        var pageCount = 1; // 分页器的总页数

        // 初始化参数, 查看当前 url 中是否包含 pageSize 和 pageIndex
        function parmInit() {
            var parmPageSize = getParamByKey("pageSize");
            var parmPageIndex = getParamByKey("pageIndex");

            if (parmPageSize != null) {
                // 此时 rul 中传入了值
                pageSize = parmPageSize;
            }
            if (parmPageIndex != null) {
                // 此时 ulr 中传入了值
                pageIndex = parmPageIndex;
            }

            // 点击跳转的本质是分页的位置改变, 像后端请求当前分页器位置中页面的数据
            doAjax();

        }

        parmInit();

        // 去首页
        function doFirst() {
            if (pageIndex <= 1) {
                alert("当前已位于首页!");
                return false;
            }
            pageIndex = 1;

            // 点击跳转传入当前的 pageIndex 和 pageSize 给初始化方法中的 doAJax() 进行处理
            // 只负责传入位置
            location.href = "myblog_list.html?pageIndex=" + pageIndex + "&pageSize=" + pageSize;

        }

        // 上一页
        function doUpPage() {
            if (pageIndex <= 1) {
                alert("当前已位于首页!");
                return false;
            }
            --pageIndex;
            location.href = "myblog_list.html?pageIndex=" + pageIndex + "&pageSize=" + pageSize;
        }

        // 下一页
        function doDownPage() {
            if (pageIndex >= pageCount) {
                alert("当前已位于末页!");
                return false;
            }
            ++pageIndex;
            location.href = "myblog_list.html?pageIndex=" + pageIndex + "&pageSize=" + pageSize;
        }

        function doLast() {
            if (pageIndex >= pageCount) {
                alert("当前已位于末页!");
                return false;
            }
            location.href = "myblog_list.html?pageIndex=" + pageCount + "&pageSize=" + pageSize;
        }

        function doAjax() {

            // 查询当前用户数据库中已发布文章总数
            jQuery.ajax({
                url: "/art/getArticleFromUser",
                type: 'post',
                data: {},
                success: function (res) {
                    if (res.code == 200 && res.data > 0) {
                        pageCount = Math.ceil(res.data / pageSize);
                    }
                }
            });


            // 发送请求加载不同页当前用户的文章内容
            jQuery.ajax({
                url: "/art/getAllArticleByPageFromUser",
                type: 'post',
                data: { 'pageSize': pageSize, 'pageIndex': pageIndex },
                // res 中获取到的为文章对象数组
                success: function (res) {
                    if (res.code == 200 && res.data.length > 0) {
                        var artHtml = "";

                        for (var i = 0; i < res.data.length; i++) {
                            var item = res.data[i];

                            // 拼接文章
                            artHtml += '<div class="blog" >';
                            artHtml += '<div class="title">' + item.title + '</div>';
                            artHtml += '<div class="date">' + item.createtime + '</div>';
                            artHtml += '<div class="date">' + item.description + '</div>';
                            artHtml += '<div class="desc">' + item.content + '</div>';
                            artHtml += '<a href="blog_content.html?id=' + item.id + '" class="detail">查看全文 &gt;&gt;</a>';
                            artHtml += '<a href="blog_edit.html?id=' + item.id + '" class="detail">修改 &gt;&gt;</a>';
                            artHtml += '<a href="Javascript:del(' + item.id + ')" class="detail">删除 &gt;&gt;</a>';
                            artHtml += '</div>';
                        }

                        jQuery("#myArticleList").html(artHtml);
                    } else {
                        // 当前用户没有文章, 隐藏分页器
                        jQuery("#pageDiv").hide();
                        jQuery("#myArticleList").html("<h1 style='display: flex;justify-content: center;align-items: center;text-align: center;color: rgba(0, 0, 0, 0.5);'>快来写你的第一篇博客吧！</h1> ");
                    }
                }
            });


        }


        function del(id){
            if(confirm("确认删除？")){
                jQuery.ajax({
                    url:"/art/del",
                    type:"POST",
                    data:{"id":id},
                    success:function(res){
                        if(res.code==200 && res.data==1){
                            alert("删除成功");
                            location.href= location.href;
                        }else{
                            alert("操作失败，请重新操作："+res.msg);
                        }
                    }
                });
            }
        }



        $("body").on("click",".head-img",function(){
	        $("#imgfile").trigger("click");  //通过点击图片执行input file事件
        })

        

        

        function uploadPic(){


            var fileInput = document.getElementById("imgfile");
            var file = fileInput.files[0];
            var formData = new FormData();
            formData.append("file",file);

            jQuery.ajax({
                url:'/user/upload',
                type:'POST',
                data:formData,
                cache:false,
                contentType:false,
                processData:false,
                success:function(d){
                    if(d.code == 200 && d.data.length>0 && d.data.length<=255){
                        jQuery("#image").attr("str",d.data);
                        jQuery("#image").show();
                        alert("头像上传成功");
                    }
                    else{
                        alert("上传失败："+d.msg);
                    }

                }

            });
        }

        function initPric(){
            jQuery.ajax({
                url:"/user/initpric",
                type:"POST",
                data:{},
                success:function(res){
                    if (res.code == 200 && res.data.image_path.length > 0 &&
                        res.data.image_path.length < 255 && res.data != null) {

                        jQuery("#image").attr("src", res.data.image_path);
                        jQuery("#image").show();

                    } else {
                        // 无需初始化, 原始设定的默认头像
                    }

                }
            });
        }
        initPric();
        
        function isLogin(){
                jQuery.ajax({
                    url:"/user/islogin",
                    type:"POST",
                    data:{},
                    success:function(res){
                        if(res.code==200&&res.data==1){
                            
                        }else{
                            location.href="login.html";
                        }
                    }
                });
            }
            isLogin();
        
    </script>
</body>

</html>